/* universal styling for all elements */
*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

/* sets the body's background colour */
body{
    background-color: rgb(226, 226, 226);
	width: 100%;
}

/* sets the default font to 'Poppins' and changes the default font colour */
body{ 
    font-family: 'Poppins', sans-serif;
    color: rgb(41, 41, 41);
	overflow-x: hidden;
}

/* styles the header bar and position*/
nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
    min-height: 8vh;
    background-color: #1e7974;
    position: sticky;
	top: 0px;
    width: 100%;
    z-index: 2;
	transition: all 0.6s;
}

/* styles the header bar when active*/
nav.active {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: #1e7974;
	opacity:0.8;
    min-height: 8vh;
    position: sticky;
	top: 0;
    width: 100%;
    z-index: 2;
	transition: all 0.6s;

}

/* styles the position of the navigation links */
.nav-links{
    display: flex;
    justify-content: space-around;
    width: 40%;
	overflow-x: hidden;

}

/* styles the text of the navigation bar links */
.nav-links a{ 
    color: rgb(226, 226, 226);
    text-decoration: None;
    font-size: 16px;
    letter-spacing: 2px;
}

/* styles the text of the navigation bar links, when they're hovered over */
.nav-links a:hover{ 
    opacity: 0.5;
    text-decoration: None;
}

/* removes bullet points from the navigation bar links */
.nav-links li{ 
    list-style: none;
}

/* sets the padding of the logo */
.logo{ 
    padding-top: 10px;
    padding-bottom: 10px;
	z-index: 2;
}

/* styles logo when hovered over */
.logo img:hover{ 
    opacity: 0.5;
    cursor: pointer;
}

/* hides burger and creates a pointer cursor when hovered over */
.burger { 
    display: none; 
    cursor: pointer;
}

/* styles burger */
.burger div{
    width: 23px;
    height: 3px;
    background-color: rgb(226, 226, 226);
    margin: 5px;
    transition: all 0.3s ease;
}

/* styling contents when the max-width is 1024px */
@media screen and (max-width:1024px){
	
    /* styles and adds transition and transformation to the navigation bar links */
    .nav-links{ 
        position: absolute; 
        right: 0px; 
        height: 92vh;
        top: 8vh; 
        background-color: #1e7974;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 40%;
        transform: translateX(100%);
        transition: transform 0.5s ease-in;
    }

    /* styles the navigation bar links */
    .nav-links li{ 
        opacity: 0;
    } 

    /* sets the burger to block positioning */
    .burger{ 
        display: block;
    }
	
	/* sets the x overflow of the body to hidden */
	.body{
		overflow-x: hidden;
	}
}

/* moves the navigation links from the right, with an opacity fade in effect */
.nav-active{ 
    transform: translateX(0%);
}

@keyframes navLinkFade{
    from{ 
        opacity: 0;
        transform: translateX(50px);
    }
    to{ 
        opacity: 1;
        transform: translateX(0px);
    }
}

/* tranforms and translates the first line of the burger menu */
.toggle .line1{ 
    transform: rotate(-45deg) translate(-5px,6px);
}

/* sets the opacity of the second line of the burger menu */
.toggle .line2{ 
    opacity: 0;
}

/* tranforms and translates the third line of the burger menu */
.toggle .line3{ 
    transform: rotate(45deg) translate(-5px,-6px);
}

/* styles the hero-image class*/
.hero-image {
    background-image: url("../../assets/man-commuting-on-bicycle-to-work.jpg"); /* The image used */
    background-color: rgb(226, 226, 226); /* Used if the image is unavailable */
    height: 630px; /* You must set a specified height */
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover;
    display: flex;
    justify-content: space-around;
}

/* styles the title on the hero image */
.header-contents h1 { 
    font-family: 'Poppins', sans-serif;
    font-size: 4em;
    color: #0e4541;
}

/* sets the position of the hero image contents*/
.header-contents{
    position: absolute;
    top: 220px;
    left: 150px;
    z-index: 1;

}

/* styles the button on the hero image */
.header-contents button{ 
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    color: #0e4541;
    border: 3px solid #0e4541; 
    cursor: pointer;
    border-radius: 50px;
    padding: 8px;
    background: rgb(255, 255, 255, 0);
    margin-top: 10px;
}

/* styles the button when hovered over on the hero image */
.header-contents button:hover{
    color: #228a83;
    border: 3px solid #228a83; 
}

/* styles the paragraph width and size on the hero image */
.header-contents p{ 
    width: 50%;
    font-size: 14px;
}

/* styles the footer */
.footer{ 
    background-color: rgb(41, 41, 41);
    padding: 40px 0;
}

/* styles the footer section */
.footer .social { 
    text-align: center;
    padding-bottom: 25px;
    color: rgb(226, 226, 226);
}

/* positions the social media icons and adds a rounded border */
.footer .social a { 
    font-size: 24px;
    color: inherit;
    border: 1px solid rgb(226, 226, 226);
    width: 40px; 
    height: 40px;; 
    line-height: 38px;
    display: inline-block;
    text-align: center;
    border-radius: 50%;
    margin: 0 8px;
    opacity: 0.75;
}

/* sets the opacity of the social media icons to 100% when hovered over */
/* adds an pointer cursor when the social media icons are hovered over */
.footer .social a:hover { 
    opacity: 1;
    cursor: pointer;
}

/* styles and positions the webpage links on the footer */
.footer ul { 
    margin-top: 0; 
    margin-bottom: 0;
    list-style: none;
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 0;
    text-align: center;
}

/* removes text decoration from webpage links on the footer, and sets the colour and opacity */
.footer ul a { 
    color: rgb(226, 226, 226);
    text-decoration: none;
    opacity: 0.8;
}

/* styles and positions the webpage links on the footer */
.footer ul li {
    display: inline-block;
    padding: 0 15px;
}

/* sets the opacity of the webpage links to 100% when hovered over */
/* adds an pointer cursor when the webpage links are hovered over */
.footer ul li a:hover{ 
    opacity: 1;
    cursor: pointer;
}

/* styles the copyright text */
.footer .copyright{ 
    margin-top: 15px;
    text-align: center;
    font-size: 14px;
    color:rgb(102, 102, 102);
}

/* styles the content when the max-width is 1285px */
@media screen and (max-width:1285px){

    /* changes the postion of the header contents */
    .header-contents{
        top: 220px;
        left: 50px;
    }

    /* changes the size of the title */
    .header-contents h1 { 
        font-size: 3em;
    }

    /* changes the font size of the navigation elements */
    .footer ul a {
        font-size: 15px;
    }
	
	/* sets the x overflow of the body to hidden */
	.body{
		overflow-x: hidden;
	}
}

/* styles the content when the max-width is 681px */
@media screen and (max-width:681px){

    /* styles the height, and changes the image for the hero image class*/
    .hero-image {
        background-image: url("../../assets/man-commuting-on-bicycle-to-work-mobile-view.jpg");
        height: 600px; 
        }

    /* changes the size of the title's font on the hero image */
    .header-contents h1 { 
        font-size: 25px;
    }
	
	/* styles the button on the hero image */
	.header-contents button{ 
		font-size: 12px;
	}

	/* changes the size of the paragraph's font on the hero image */
    .header-contents p{
        font-size: 12px;
    }

    /* changes the padding and font size of the button on the hero image */
    .header-contents button{ 
        padding: 4px;
        font-size: 12px;
    }

    /* changes the position of the content on the hero image */
    .header-contents{
        left: 20px;
    }
	
	/* sets the x overflow of the body to hidden */
	.body{
		overflow-x: hidden;
	}
}

/* fades in header contents */
.header-contents{ 
    animation: fadeIn linear 2s;
    -webkit-animation: fadeIn linear 2s;
    -moz-animation: fadeIn linear 2s;
    -o-animation: fadeIn linear 2s;
    -ms-animation: fadeIn linear 2s;
}

/* fades in the hero image's content from 0 to 100% */
@keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
  }

/* fades in the hero image's content from 0 to 100% */
  @-moz-keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
  }

/* fades in the hero image's content from 0 to 100% */
  @-webkit-keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
  }

/* fades in the hero image's content from 0 to 100% */
  @-o-keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
  }

/* fades in the hero image's content from 0 to 100% */
  @-ms-keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
  }

/* styles the about us section */
.about{ 
    width: 100%;
    padding: 78px 0px;
    background-color: rgb(226, 226, 226);
}

/* styles the about us image */
.about img{ 
    height: auto;
    width: 300px;
    margin-right: 100px;
}

/* styles the main section that holds the about us contents */
.main{
    width: 100%; 
    margin: 0 auto; 
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding-left: 100px; 
    padding-right: 100px;
}

/* styles the about us text */
.about-text p{ 
    color: rgb(41, 41, 41);
}

/* styles the about us heading text */
.about-text h1{ 
    font-size: 3em;
    color: #0e4541;
}

/* styles the about us section where the max-width is 1050px */
@media screen and (max-width:1050px){

    /* styles the main section that holds the about us contents */
    .main{
        width: 100%; 
        margin: 0 auto; 
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
    }

    /* styles the about us text */
    .about-text p{ 
        text-align: center;
        font-size: 14px;

    }

    /* styles the about us heading text */
    .about-text h1{ 
        text-align: center;
        font-size: 3em;
        padding-top:30px; 
    }

    /* styles the about us image */
    .about img{ 
        height: auto;
        width: 300px;
        margin-right: 0px;
    }
	
	/* sets the x overflow of the body to hidden */
	.body{
		overflow-x: hidden;
	}
}

/* styles the about us section where the max-width is 420px */
@media screen and (max-width:420px){

    /* changes the size of the title's font on the hero image */
    .header-contents h1 { 
        font-size: 30px;
    }

	/* changes the size of the paragraph's font on the hero image */
    .header-contents p{
        font-size: 14px;
    }
	
	/* styles the button on the hero image */
	.header-contents button{ 
		font-size: 14px;
	}
	
	/* moves header contents up */
	.header-contents{
		top:170px; 
	}
	
	/* sets the x overflow of the body to hidden */
	.body{
		overflow-x: hidden;
	}
}

/* styles and positions the back to top button */
#btnScrollToTop {
    position: fixed;
    right: 10px;
    bottom: 10px;
    width: 50px; 
    height: 50px; 
    border-radius: 50%;
    background-color: #d64567;
    box-shadow: 0 0 10px rgb(0, 0, 0, 0.25);
    color: rgb(226, 226, 226);
    outline: none;
    cursor: pointer;
    border: none;
}

/* styles the back to top button when hovered over */
#btnScrollToTop:hover {
    background-color: #9e2541;
}

/* changes the paragraph text colour on the hero image */
.header-contents p{
    color: rgb(41, 41, 41);
}